<template>
  <div style="width: 100%; height: 100%; display: flex; min-height: 600px">
    <div style="background-color: #fff; box-shadow: 5px #fff; height: calc(100% - 20px); width: 100%">
      <div
        style="
          height: 35px;
          border-bottom: 1px solid #e5e5e5;
          background: var(--el-descriptions-item-bordered-label-background);
          color: var(--el-text-color-regular);
          font-weight: bold;
          display: flex;
          justify-content: space-between;
          padding: 0 50px;
          align-items: center;
          font-size: 12px;
        "
      >
        <div>状态码：<span>200</span></div>
        <div>响应时间(ms)：210</div>
        <div>响应大小(Byte)：210</div>
        <div>运行结果：210</div>
      </div>
      <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
        <el-tab-pane label="响应体" name="first"> </el-tab-pane>
        <el-tab-pane label="响应头" name="second"> </el-tab-pane>
        <el-tab-pane label="请求头" name="third"> </el-tab-pane>
        <el-tab-pane label="请求内容" name="fourth"> </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import type { TabsPaneContext } from 'element-plus';

defineOptions({
  name: 'SoapRunResult',
});

const activeName = ref('first');

const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event);
};
</script>
<style lang="scss" scoped>
.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}
.demo-tabs :deep(.el-tabs__nav) {
  padding: 0 20px;
}
</style>
